<template>
    <div class="main-page">
        <el-form :model="formData" label-position="left" ref="formData"
                 size="mini">
            <el-row type="flex" justify="start">
                <el-col>
                    <el-form-item label="所在班级">
                        <el-select @change="" class="search-input" v-model="formData.cid"
                                   placeholder="选择所在班级">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gclassList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="开始日期">
                        <el-date-picker style="width: 220px"
                                        v-model="formData.starttime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="结束日期">
                        <el-date-picker style="width: 220px"
                                        v-model="formData.endtime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="所选老师">
                        <el-select @change="" class="search-input" v-model="formData.eid"
                                   placeholder="请选择老师">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gempList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!-- 已处理/已通过/已忽略/已调课-->
                    <el-form-item label="申请状态">
                        <el-select @change="" class="search-input" v-model="formData.status"
                                   placeholder="请选择申请状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gleaveStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <el-row>
            <el-button type="primary" size="mini" @click="resetForm('formData')" icon="el-icon-search">重置
            </el-button>
            <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" @click="this.batchDeal" size="mini" icon="el-icon-search">批量处理</el-button>
        </el-row>


        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.id }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    property="name"
                    label="姓名"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.stuname }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    property="ename"
                    label="stutype"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="cname"
                    label="所在班级"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.clsname }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="subject"
                    label="所在科目"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.subject | commentFmt(gsubjectMap) }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="status"
                    label="状态"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.status | commentFmt(leaveStatusMap)}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="recordid"
                    label="课节id"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.rid }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="申请时间"
                    property="createtime"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.createtime | dateFmt }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"

                    min-width="10%">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-tooltip content="通过" placement="top">
                                <el-button @click="pass(scope.$index,scope.row.id,1)" class="col-btn" size="mini"
                                           type="primary"
                                           icon="el-icon-goods"></el-button>
                            </el-tooltip>
                            <el-tooltip content="忽略" placement="top">
                                <el-button @click="pass(scope.$index,scope.row.id,2)" class="col-btn" size="mini"
                                           type="primary"
                                           icon="el-icon-edit"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                </el-table-column>


            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog
            title=""
            :visible.sync="DealDialogVisible"
        >
            <addSubject ref="addSubjectFrom"></addSubject>
            <template slot="footer">
                <el-row type="flex" justify="end">
                    <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                    <el-button @click="addSubject" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>

        </el-dialog>


    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import addStudent from '../page/addStudent'
    import updateStudent from '../page/updateStudent'
    import userDetail from '../page/userDetail.vue'
    import {
        userList,
        getuserDetail,
        returncharge,
        updateUserStatus,
        updateUser,
        deleteUser,
        queryDealAbsentListApi,
        confirmAbsentApi
    } from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {
                loading: false,
                AddDialogVisible: false,
                planDialogVisible: false,
                classrange: '',
                empsList: [],
                formData: {cid: null, starttime: new Date(), endtime: null, eid: null, status: 2},
                pager: {pageNo: 1, pageSize: 5},
                value: '',
                selectuser: {
                    user: {}, userCharge:
                        {
                            periodnames: '',
                            totaltimes: '',
                            totalclass: '',
                            totalcash: '',
                            remainclass: '',
                            remaincash: ''
                        }
                },
                detailshowDialog: false,
                updateshowDialog: false,
                dialogType: '',
                tableData: [],
                count: 0,
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addStudent,
            userDetail,
            updateStudent,

        },

        computed: {
            ...mapGetters(['adminInfo', 'gempList', 'gleaveStatusList', 'gclassList', 'leaveStatusMap', 'gsubjectMap'])
        },

        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            tableRowClassName({row, rowIndex}) {

            },
            async batchDeal() {

            },


             pass(index, id,status) {
                this.$confirm('确认操作？')
                    .then(_ => {
                        this.confirmpass(id,status);
                    })
                    .catch(_ => {
                    });


            },

            async confirmpass(id,status){
                alert("id="+id);
                const res = await confirmAbsentApi({id: id, status: status});
                if (res.success == true) {

                } else {

                }
            },

            async ignore(index, id) {
                const res = await confirmAbsentApi({id: id, status: 2});
                if (res.success == true) {

                } else {

                }

            },


            next() {
                if (this.addActive++ > 2) this.addActive = 0;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            addStu() {
                this.AddDialogVisible = true;
            },
            planclass() {
                this.planDialogVisible = true;
            },

            searchReset() {
                this.formData = {username: ''};
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.searchReset();
            },

            async initData() {
                this.loading = true;
                this.tableData = [];
                this.formData.pager = this.pager;
                const res = await queryDealAbsentListApi({data: this.formData});
                if (res.success == true) {
                    var list = res.data;
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.createtime = item.createtime;
                        tableData.updatetime = item.updatetime;
                        tableData.orgid = item.orgid;
                        tableData.pid = item.pid;
                        tableData.stuname = item.stuname;
                        tableData.clsname = item.clsname;
                        tableData.status = item.status;
                        tableData.cid = item.cid;
                        this.tableData.push(tableData);
                    });

                }

                this.loading = false;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.formData.pageno = val;
                this.initData()
            },
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }

    .el-table .zss {
        background: #ffffff;
    }

    .el-table .zts {
        background: #fab6b6;
    }

    .el-table .common {
        background: #F5F5F5;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .table_container {
        padding: 20px;
    }

    input {
        width: 600px;
    }
</style>
